﻿<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>简单实用且功能齐全的jQuery分页插件</title>
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link href="dist/pagination.css" rel="stylesheet" type="text/css">
	<style type="text/css">
        ul, li{
            list-style: none;
        }
        #wrapper{
            width: 900px;
            margin: 20px auto;
        }
        .data-container{
            margin-top: 5px;
        }
        .data-container ul{
            padding: 0;
            margin: 0;
        }
        .data-container li{
            margin-bottom: 5px;
            padding: 5px 10px;
            background: #66677c;
            color: #fff;
        }
    </style>
	<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<article class="htmleaf-container">

		<div id="wrapper">
		    <section>
		        <div class="data-container"></div>
		        <div id="pagination-demo1"></div>
		    </section>
		</div>
	</article>

	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
	<script src="dist/pagination.js"></script>
	<script>
	    $(function(){

	        function createDemo(name){
	            var container = $('#pagination-' + name);
	            var sources = function(){
	                var result = [];

	                for(var i = 1; i < 196; i++){
	                    result.push(i);
	                }

	                return result;
	            }();

	            var options = {
	                dataSource: sources,
									
	                className: 'paginationjs-theme-blue',
	                callback: function(response, pagination){
	                    window.console && console.log(response, pagination);

	                    var dataHtml = '<ul>';

	                    $.each(response, function(index, item){
	                        dataHtml += '<li>'+ item +'</li>';
	                    });

	                    dataHtml += '</ul>';

	                    container.prev().html(dataHtml);
	                }
	            };

	            //$.pagination(container, options);

	            container.addHook('beforeInit', function(){
	                window.console && console.log('beforeInit...');
	            });
	            container.pagination(options);

	            container.addHook('beforePageOnClick', function(){
	                window.console && console.log('beforePageOnClick...');
	                //return false
	            });

	            return container;
	        }

	        createDemo('demo1');

	    });
	</script>
</body>
</html>
